<template>
  <div
    :id="$attrs.id"
    class="panel"
    :aria-expanded="$attrs.ariaExpanded"
  >
    <div
      v-if="hasTitle"
      ref="header"
      class="card-header"
    >
      <p class="card-header-title">
        <span v-text="title" />
      </p>
    </div>
    <div
      v-if="'default' in $slots"
      class="card-content"
    >
      <div class="level">
        <slot />
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  title: {
    type: String,
    default: undefined,
  },
});

const hasTitle = computed(() => {
  return !!props.title;
});
</script>

<style scoped>
.panel:not(:last-child) {
  margin-bottom: 1.5rem;
}
.panel {
  margin-bottom: 1.5rem;
  overflow: initial;
}

.panel {
  border-radius: 6px;
  -webkit-box-shadow: 0 .5em 1em -.125em rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .02);
  box-shadow: 0 .5em 1em -.125em rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .02);
  font-size: 1rem;
}

.card-header, .card-header-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 16px;
}
.card-header {
  background-color: transparent;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -webkit-box-shadow: 0 .125em .25em rgba(10, 10, 10, .1);
  box-shadow: 0 .125em .25em rgba(10, 10, 10, .1);
}
.card-header-title {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #363636;
  -webkit-box-flex: 1;
  flex-grow: 1;
  font-weight: 700;
  padding: 15px;
}
.card-content {
  background-color: transparent;
  padding: 15px;
}
.card-content:last-child, .card-header:last-child {
   border-bottom-left-radius: .25rem;
   border-bottom-right-radius: .25rem;
 }
</style>